 <?php if ($this->get('list') == 1){ ?>
 	<script type="text/javascript" src="<?php $this->path('js/jquery.validate.min.js');?>"></script>
    <div id="new-category">
		<form id="addcat" class="form_style registed finished" style="margin-top: 0px;" onsubmit="return false">
        	<strong>Add New Category</strong><br/>
        	<input type="text" name="new_category" class="" value="" placeholder="Category Name..."/><br />
			<strong>Select Base Category</strong><br/>
			<select id="base-cat">
				<option value="0">Select Option</option>
    		<?php foreach($categories as $cat){ 
				if ($cat['base_cat_id'] == 0)
					echo '<option value=' . $cat['icid'] .' >' . $cat['name'] . '</option>';
    		} ?>
			</select>
			<div class="clear" style="margin-top:10px"></div>
			<input type="submit" name="add_category" value="Add" />
			<div class="clear"></div>
		</form>
		<br/>
		<div style="height:310px;overflow:auto;margin-bottom:-10px">
    		<table id="cat-table">
    			<thead>
        			<tr style="display:block;position:relative;">
        				<th style="width:470px">Category</th>
        				<th class="bg" style="width:100px">Delete</th>
        			</tr>
        		</thead>
				<tbody class="content" style="height: 230px;overflow: auto;display: block;width:100%">
    		<?php foreach($categories as $cat){ ?>
        			<tr class="list" id="cat<?php echo $cat['icid']; ?>" name="<?php echo $cat['name']; ?>">
        				<td style="width:470px"><?php 
						if($cat['base_cat_id'] != 0)
							echo $cat['base'] . " -> " . $cat['name'];
						else
							echo $cat['name'];
						 ?></td>
        				<td class="bg" style="width:100px"><a href="#" class="del-category">Delete</a></td>
        			</tr>
    		<?php } ?>
			</tbody>
    		</table>
		</div>
    </div>
	<script>
	var cat_refunc = function(){
    	$('.del-category').click(function(e){
			e.preventDefault();
    		$(this).parent().parent().fadeOut('slow',function(){
				x = $(this);
				$.post('?module=pos&action=inventory&action2=category&ajax=true',
                    {delete:1,name:$(this).attr('name')},
                    function(data){
						x.remove();
						$('#base-cat').selectBox('destroy');
						$('#base-cat option').each(function(){
							if($(this).text() == x.attr('name'))
								$(this).remove();
						});
						$('#base-cat').selectBox();
					});
			});
    	});
	};
	cat_refunc();
	$(document).ready(function(){
	    $("#addcat").validate({
          	rules: {
          		new_category: {
          			required: true
          		}
			}
		});
		$("#base-cat").selectBox();
    	$("#addcat").submit(function(e){
			e.preventDefault();
    		name = $('input[name=new_category]').val();
    		base = $('#base-cat').val();
    		if(name.length > 0){
        		$.post('?module=pos&action=inventory&action2=category&ajax=true',{add:1,name:name,base:base},function(data){
					console.log(data);
					if(data.trim() != "Already exist!" ){
						if($("#base-cat").val() != 0){
                			list = '<tr style="width:470px" class="list" name="' + $('input[name=new_category]').val() + '">'+
                    		'<td>' + $("#base-cat option:selected").text() + " -> " + $('input[name=new_category]').val() + '</td>'+
                    		'<td class="bg" style="width:100px"><a href="#" class="del-category">Delete</a></td>'+
                    		'</tr>';
						}else{
                			list = '<tr style="width:470px" class="list" name="' + $('input[name=new_category]').val() + '">'+
                    		'<td>' + $('input[name=new_category]').val() + '</td>'+
                    		'<td class="bg" style="width:100px"><a href="#" class="del-category">Delete</a></td>'+
                    		'</tr>';
						}
                		$('#cat-table tbody').append(list).hide().fadeIn();
                		$('input[name=new-category]').val("");
                		cat_refunc();
        				$('input[name=new-category]').val("");
        				$('#base-cat').append(data).val("0");
						$('#base-cat').selectBox('destroy');
						$('input[name=new_category]').val("");
    					$('#base-cat').val(0);
						$("#base-cat").selectBox();
    				} else {
						$('input[name=new_category]').val("");
    					$("#addcat").trigger('submit');
						$('input[name=new_category]').next().text(data);
    				}
        		});
    		}
    	});
	});
	</script>
<?php } else if ($islistings){ ?>
		<input id="search-cat" type="text" style="width: 50%;" placeholder="Search for a Category" />
		<select id="category-sel" style="width: 43%;" name="category" class="selection" style="margin-bottom:10px;">
        	<option value="0">Select Category</option>
    		<?php foreach($categories as $cat){ 
				if (!$cat['base_cat_id']){?>
        		<option value="c<?php echo $cat['icid'] ?>"><?php echo $cat['name']; ?></option>
    		<?php }} ?>
		</select>
		<table id="cat-listing">
		<?php foreach($categories as $cat){ 
			if ($cat['base_cat_id']>0){
		?>
			<tr class="list listing-h c<?php echo $cat['base_cat_id'] ?>"  value="<?php echo $cat['icid'] ?>" style="display:none;">
    			<td><?php echo $cat['name']; ?></td>
			</tr>
		<?php }} ?>
		</table>
 <?php } else { ?>
 	<style>
	.listing-h:hover{ background: #FDFFD5 !important; cursor:pointer; }
	</style>
 	<input id="open-cat-menu" type="button" value="Select Category" />
 	<input id="cat-selected" icid="0" name="category" style="background-color:white;border:0px;" type="text"/>
	<div class="clear"></div>
	<div id="cat-men" title="Select Category">
	</div>
	<script>
	$('#cat-selected').focus(function(){$(this).blur()});
	var refunccat = function(){
    	$('.list.listing-h').click(function(){
    		$('input[name=category]').val($(this).children().text()).attr('icid',$(this).attr('value'));
    		$('#cat-men').dialog('close');
    	});
    	$('#category-sel').change(function(){
    		var key = $('#search-cat').val();
    		if($(this).val() == 0){
    			$('#search-cat').trigger('keyup');
    		}else{
        		$('#cat-listing tr').hide();
        		$('.'+$(this).val()).each(function(){
        			if( $(this).children().text().toLowerCase().indexOf(key.toLowerCase()) == -1 )
        				$(this).hide();
        			else
        				$(this).fadeIn();
        		});
    		}
    	});
    	$('#search-cat').keyup(function(){
    		var key = $(this).val();
    		var base = $('#category-sel').find('option[value='+$('#category-sel').val()+']');
    		$('#cat-listing tr').each(function(){
    			if( $(this).children().text().toLowerCase().indexOf(key.toLowerCase()) > -1 && ($(this).hasClass(base.val()) || $('#category-sel').val() == 0) )
    				$(this).fadeIn();
    			else
    				$(this).hide();
    		});
    	});
	}
	$('#open-cat-menu').click(function(){
		$('input[name=category]').val("");
		$('#category-sel').val(0);
		$('#search-cat').val("");
    	$('#cat-listing tr').hide();
		$.post('?module=pos&action=inventory&action2=category&ajax=true&listing=1',function(data){
    		$('#cat-men').html(data);
			refunccat();
    		$('#cat-men').dialog('open');
		});
	});
    $('#cat-men').dialog({
        autoOpen: false,
        height: 300,
        width: 420,
        modal: true,
        resizable: false
    });
	</script>
    <!--<select id="category-sel" name="category" class="selection" style="margin-bottom:10px;">
    	<option value="">Select Category</option>
		<?php foreach($categories as $cat){ ?>
    	<option value="<?php echo $cat['icid'] ?>"><?php echo $cat['name']; ?></option>
		<?php } ?>
    </select>
	<style>
		#cat-menu .dl-back { padding:0px !important;}
	</style>
	<input name="category" type="hidden" id="category-sel" />
	<label for="categ" class="error" style="z-index: 1;position: absolute;left: 30px;top: 45px;display:none;">This field is required.</label>
	<input type="text" style="position: absolute;left: 165px;top: 70px;border:0px;background:#fff;font-size:14px;font-weight:bold;width:85%" value="Select Category" disabled/>
	<div id="cat-menu" class="dl-menuwrapper demo-2" style="">
		<input type="button" class="dl-trigger ease" value="Select Category" />
		<ul class="dl-menu" style="margin-top: 40px;">
		<?php foreach($categories as $cat){ ?>
			<?php if($cat['base_cat_id'] == 0){ ?>
			<li style="padding:0px">
				<a href="#"><?php echo $cat['name']; ?></a>
				<ul class="dl-submenu">
				<?php foreach($categories as $cat2){ ?>
					<?php if($cat2['base_cat_id'] == $cat['icid']){ ?>
					<li style="padding:0px"><a href="javascript:$('#category-sel').val('<?php echo $cat2['icid']?>');$('#cat-menu').dlmenu('closeMenu');$('#cat-menu').prev().val('<?php echo $cat2['base'] . " > " . $cat2['name']; ?>')"><?php echo  $cat2['name']; ?></a></li>
        			<?php } ?>
        		<?php } ?>
				</ul>
			</li>
			<?php } ?>
		<?php } ?>
		</ul>
	</div>
	<div class="clear"></div>
	<script>
			$(function() {
				$( '#cat-menu' ).dlmenu({
					animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
				});
			});
	</script>
	-->
<?php } ?>
 